<template>
  <div style="height: 100%;width: 100%;">
    <div id="mdEditorView"></div>
  </div>
</template>

<script>
  import $ from "jquery";
  import { getDraftOne } from "../../../api/article";

  export default {
    name : 'mdEditorView',
    data : function(){
      return {
        // 最终生成的编辑器
        editor: null,
        // 默认选项
        defaultOptions:{
          width          : '99%',
          height         : '97%',
          path           : '../../../static/editor.md-master/lib/',
          markdown       : '',
          readOnly       : true,    // 只读模式
          toolbar        : false,   // 关闭工具栏
          searchReplace  : true,
          htmlDecode     : 'style,script,iframe|on*',  // 开启 HTML 标签解析，为了安全性，默认不开启
          emoji          : true,
          taskList       : true,
          tocm           : false,    // Using [TOCM]
          tex            : false,    // 开启科学公式TeX语言支持，默认关闭
          onload: () => {
            this.editor.previewing();
          }
        },
        articleInfo: {
          articleId: null,
        }
      }
    },
    props:{
      /** editormd 挂载元素的id */
      id:{
        type:String,
        default: 'bjs-editor-md-id'
      },
      /** editormd 的选项对象 */
      options:{
        type:Object
      }
    },
    watch : {
      theme () {
        this.changeTheme()
      }
    },
    computed: {
      theme () {return this.$store.state.config.theme.type}
    },
    methods:{
      /**
       * 异步加载 editormd
       * callback 成功后的回调函数
       */
      requireEditor(callback) {
        window.$ = window.jQuery = $; //设置全局变量，因为editormd依赖jquery
        //异步加载并执行
        $.getScript("/static/editor.md-master/editormd.min.js",() => {callback();});
        //加载css
        $('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', '/static/editor.md-master/css/editormd.min.css') );
      },
      /** 得到最终的options，组件属性上获得的选项覆盖此处的默认选项 */
      getOptions(){
        return Object.assign(this.defaultOptions,this.options);
      },
      resetArticle () {
        let param = {articleId: this.articleInfo.articleId,contentType: 'MD'};
        getDraftOne(param).then(resp => {
          this.setEditorContent(resp.data.contentMd)
        })
      },
      setEditorContent (content) {
        if (content == null) {
          content = '这里空的和钱包一样 (づ╥﹏╥)づ'
        }
        this.defaultOptions.markdown = content
        if (this.editor !== null) {
          this.editor.setMarkdown(content)
        }
      },
      changeTheme () {
        if (this.theme === 'night') {
          this.defaultOptions.theme        = 'dark';
          this.defaultOptions.previewTheme = 'dark';
          if (this.editor) {
            this.editor.setTheme('dark')
            this.editor.setPreviewTheme('dark')
          }
        } else if (this.theme === 'light') {
          this.defaultOptions.theme        = 'default';
          this.defaultOptions.previewTheme = 'default';
          if (this.editor) {
            this.editor.setTheme('default')
            this.editor.setPreviewTheme('default')
          }
        }
      }
    },
    mounted(){
      this.changeTheme()
      // // 直接查看
      if (this.$route.param && this.$route.param.articleId) {
        this.articleInfo.articleId = this.$route.params.articleId
      // 新窗口传值查看
      } else if (this.$route.params && this.$route.params.articleId) {
        this.articleInfo.articleId = this.$route.params.articleId
      }
      let vm = this;
      let param = {articleId: this.articleInfo.articleId, contentType: 'MD'};
      getDraftOne(param).then(resp => {
        this.setEditorContent(resp.data.contentMd)
        this.requireEditor(function(){
          // eslint-disable-next-line no-undef
          vm.editor = editormd('mdEditorView',vm.getOptions());
        });
      })
    },
    activated() {
      // 直接查看
      if (this.$route.param && this.$route.param.articleId) {
        this.articleInfo.articleId = this.$route.params.articleId
        // 新窗口传值查看
      } else if (this.$route.params && this.$route.params.articleId) {
        this.articleInfo.articleId = this.$route.params.articleId
      }
      // if (this.editor == null) {
      //   let vm = this;
      //   let param = {articleId: this.articleInfo.articleId, type: 'md'};
      //   getDraftOne(param).then(resp => {
      //     this.setEditorContent(resp.data.contentMd)
      //     this.requireEditor(function(){
      //       // eslint-disable-next-line no-undef
      //       vm.editor = editormd('mdEditorView',vm.getOptions());
      //     });
      //   })
      // } else {
        this.resetArticle()
      // }
    }
  }
</script>

<style scoped lang="scss">
  .bjs-editor {

  }
</style>